<template>
	<div>
		<div style="padding: 10px 0;text-align: right;">
			<el-button @click="addCate" type="primary">添加分类</el-button>
		</div>
		<el-table
			:data="tableData"
			stripe
			style="width: 100%">

			<el-table-column
			  align="center"
			  prop="name"
			  label="分类名称"
			  >
			</el-table-column>
			<el-table-column
			  prop="icon"
			  label="默认图标"
			  >
              <template slot-scope="scope">
              	<file-view v-if="scope.row.icon" :file="scope.row.icon"></file-view>
              </template>
			</el-table-column>
            <el-table-column
              prop="activeIcon"
              label="激活图标"
              >
              <template slot-scope="scope">
              	<file-view v-if="scope.row.activeIcon" :file="scope.row.activeIcon"></file-view>
              </template>
            </el-table-column>
			<el-table-column
			  label="操作"
			  align="center"
			  >
			  <template slot-scope="scope">
				<el-button type="text" @click="delCate(scope.row)" size="small">删除</el-button>
				<el-button type="text" @click="editCate(scope.row)" size="small">编辑</el-button>
			  </template>
			</el-table-column>
		</el-table>
		<el-dialog :title="this.form.id?'编辑分类':'添加分类'" v-if="dialogFormVisible" :visible.sync="dialogFormVisible" >
		  <el-form  :label-width="'120px'">
			<el-form-item label="分类名称"  required>
			  <el-input style="width: 100px;" v-model="form.name" ></el-input>
			  </el-form-item>
			<el-form-item label="默认图标" >
                <file-upload @unload-success="iconSuccess" :file="form.icon" @remove-file="form.icon=''"></file-upload>
			</el-form-item>
            <el-form-item label="激活图标" >
                <file-upload @unload-success="activeIconSuccess" :file="form.activeIcon" @remove-file="form.activeIcon=''"></file-upload>
            </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
			<el-button @click="dialogFormVisible = false">取 消</el-button>
			<el-button type="primary" :disabled="form.name.trim()===''" @click="createCate">确 定</el-button>
		  </div>
		</el-dialog>
	</div>
</template>

<script>
    import fileUpload from '@/components/common/fileUpload.vue';
    import fileView from '@/components/common/fileView.vue';
    import ajax from '@/ajax';
	 export default {
	   name: 'category',
       components:{
           fileUpload,
           fileView
       },
	   data: function(){
				return {
					dialogFormVisible:false,
					form:{
						name:"",
						icon:"",
                        activeIcon:""
					},
                    defaultForm:null,
                    methodType:"post",
					tableData:[
					]
				}
		},
        mounted(){
            this.defaultForm = JSON.parse(JSON.stringify(this.form))
            this.getList()
        },
        methods:{
            iconSuccess(a,b,c){
                this.form.icon = a
            },
            activeIconSuccess(a,b,c){
                this.form.activeIcon = a
            },
            getList(){
                ajax('category',{
                    skip:0,
                    limit:20
                },'get').then(res=>{
                    this.tableData = res.content
                })
            },
            addCate(){
                this.currentRow = null
                this.dialogFormVisible = true;
                this.form = JSON.parse(JSON.stringify(this.defaultForm))
                this.methodType = "post"
            },
            editCate(row){
                this.currentRow = row
                this.dialogFormVisible = true;
                this.form =  JSON.parse(JSON.stringify(row))
                this.methodType = "put"
            },
            createCate(){
                let current = this.tableData.find(i=>{
                    return this.form.name.trim() === i.name
                })
                if(current && this.currentRow!== current){
                    this.$message.error("分类名称有重复！");
                    return
                }
                let form = JSON.parse(JSON.stringify(this.form))
                // if(!form.icon){
                //     delete form.icon
                // }
                // if(!form.activeIcon){
                //     delete form.activeIcon
                // }
                ajax('category',form,this.methodType).then(res=>{
                    console.log(res)
                    this.$message.success("保存成功")
                    this.dialogFormVisible = false
                    this.getList()
                })
            },
            delCate(row){
                this.$confirm('确定删除该分类？', '提示', {
                          confirmButtonText: '确定',
                          cancelButtonText: '取消',
                          type: 'warning'
                }).then(() => {
                    ajax('category',{
                        _id:row._id
                    },"delete").then(res=>{
                        this.$message.success("删除成功")
                        this.getList()
                    })
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消删除'
                  });          
                });
            },

        }
		}

</script>

<style>
</style>
